<template>
  <div>
    <navigation-bar></navigation-bar>

    <!-- 原本搜索框 -->
    <!-- <el-header>
      <el-input v-model="searchQuery" placeholder="搜索班级id..." prefix-icon="el-icon-search"
        class="search-input"></el-input>
        <el-button type="primary" style="margin-left: 5px" @click="handleSearch">查询</el-button>
    </el-header> -->


  <div class="searchBar">
    <input type="text" v-model="searchQuery" class="search-input" width="30vw"
     placeholder="输入班级ID跳转班级界面" />&nbsp;
    <button class="searchBtn" @click="handleSearch">跳转</button>
  </div>

    <div class="grid-container">
      <div class="grid-item">
        <el-card style="width: 100%; height: 40vh;" shadow="never">
          <TotalInfo />
        </el-card>
      </div>
      <div class="grid-item">
        <el-card style="width: 100%; height: 40vh;" shadow="never">
          <Top />
        </el-card>
      </div>
      <div class="grid-item">
        <el-card style="width: 100%; height: 40vh;" shadow="never">
          <Dropout />
        </el-card>
      </div>
      <div class="grid-item">
        <el-card style="width: 100%; height: 40vh;" shadow="never">
          <ExtraCourse />
        </el-card>
      </div>
    </div>

  </div>
</template>

<script setup>

import { ref } from 'vue';
import NavigationBar from '@/components/NavigationBar.vue';
import TotalInfo from '../components/Course/TotalInfo.vue';
import Top from '../components/Course/Top.vue';
import Dropout from '../components/Course/Dropout.vue';
import ExtraCourse from '../components/Course/ExtraCourse.vue';
import router from "@/router/index.js";
import { ElMessage } from 'element-plus'

const searchQuery = ref('');
const handleSearch = () => {
  if (!searchQuery.value) {
    ElMessage({
      message: '请先输入班级id！',
      grouping: true,
      type: 'error'
    })
    return;
  }
  console.log(searchQuery.value);
  router.push({ path: '/singleClassroom', query: { classroomId: searchQuery.value } })
} 
</script>

<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
}

.grid-item {
  background-color: #f0f0f0;
  border-radius: 8px;
  overflow: hidden;
}

input {
  box-sizing: border-box;
  height: 40px;
  width: 40vw;

  border: none;
  padding: 1px 1px;
  border-radius: 4px;
  background-color: rgb(202, 203, 207);
  color: #7d7e81;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  margin-bottom: 10px;
}

input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 5px rgba(16, 142, 233, 0.2);
}


.searchBar {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.searchBtn {
  display: inline-block;
  padding: 10px 20px;
  margin: 10px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

</style>
